<template>
  <page-header-wrapper :title="false">
    <div>
      <a-row id="home_wrapper" type="flex">
        <a-col id="left_tree" flex="400px">
          <div>
            <a-tree v-model="checkedKeys" :expanded-keys="expandedKeys" :replaceFields="replaceFields" :auto-expand-parent="true" :defaultExpandAll="true" @check="onCheckTree" @select="onSelectTree" checkable :show-line="true" :show-icon="false" :show-leaf-icon="false" :treeData="treeData" >
            </a-tree>
          </div>
        </a-col>
        <div style="width:10px"></div>
        <a-col flex="auto">
          <div id="right-content-white">
            <a-card title="" :bordered="false" >
<!--            <div class="top-mode-selector">-->
<!--              <a-radio-group v-model="value" @change="onChange">-->
<!--                <a-radio :value="1"> 地图显示 </a-radio>-->
<!--                <a-radio :value="2"> 列表显示 </a-radio>-->
<!--              </a-radio-group>-->
<!--            </div>-->
<!--            <div class="device-search">-->
<!--              <span> 单位： </span>-->
<!--              <a-select size="small" placeholder="请选择" style="width: 120px" @change="handleChangeCompany">-->
<!--                <a-select-option v-for="item in companyData" :key="item.value" :value="item.value">-->
<!--                  {{ item.value }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--              <span style="margin-left: 7px"> 设备组： </span>-->
<!--              <a-select size="small" placeholder="请选择" style="width: 120px" @change="handleChangeDeviceGroup">-->
<!--                <a-select-option v-for="item in deviceGroupData" :key="item.value" :value="item.value">-->
<!--                  {{ item.value }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--              <span style="margin-left: 7px"> 关键字： </span>-->
<!--              <a-input style="width: 123px" size="small" placeholder="请输入关键字" />-->
<!--              <a-button style="margin-left: 7px" size="small" type="primary"> 查询 </a-button>-->
<!--            </div>-->
<!--            <div class="device-scatter">-->
<!--              <span> 设备分布 </span>-->
<!--              <a-button-->
<!--                style="margin-left: 7px"-->
<!--                :ghost="selectedDeviceSactter == 1"-->
<!--                type="primary"-->
<!--                size="small"-->
<!--                @click="changeDeviceSactter(1)"-->
<!--              >所有设备</a-button-->
<!--              >-->
<!--              <a-button-->
<!--                style="margin-left: 7px"-->
<!--                :ghost="selectedDeviceSactter == 2"-->
<!--                type="primary"-->
<!--                size="small"-->
<!--                @click="changeDeviceSactter(2)"-->
<!--              >报警设备</a-button-->
<!--              >-->
<!--              <a-button-->
<!--                style="margin-left: 7px"-->
<!--                :ghost="selectedDeviceSactter == 3"-->
<!--                type="primary"-->
<!--                size="small"-->
<!--                @click="changeDeviceSactter(3)"-->
<!--              >故障设备</a-button-->
<!--              >-->
<!--            </div>-->
            <autoMap :mapInfo="mapInfo" :pointData="pointData" style="margin:15px;height:calc(100vh - 170px)"> </autoMap>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { Bar } from '@/components'

import { CarryOutOutlined } from '@/antd/icon'
import tool from '@/utils/tool';
import autoMap from "@/components/Map/autoMap";
export default {
  name: 'Home',
  components: {
    Bar,
    autoMap
  },
  data() {
    return {
      mapInfo:[],//护栏地图落点的信息
      pointData:[],//设备落点
      checkedKeys:[],
      expandedKeys:[],
      replaceFields:{
        title:'lable',
        key:'id'
      },
      selectedDeviceSactter: 1,
      loading: false,
      value: 1,
      companyData: [
        { key: 2, value: '单位1' },
        { key: 3, value: '单位2' },
      ],
      deviceGroupData: [
        { key: 2, value: '设备组1' },
        { key: 3, value: '设备组2' },
      ],
      keyword: '',
      treeData: [
        {
          title: '设备监控中心',
          key: '1',
          icon: <CarryOutOutlined />,
          children: [
            {
              title: '安徽精微科技有限公司',
              key: '2',
              icon: <CarryOutOutlined />,
              children: [
                {
                  title: '合肥市政管理处',
                  key: '3',
                  icon: <CarryOutOutlined />,
                  children: [
                    {
                      title: '设备1',
                      key: '4',
                      icon: <CarryOutOutlined />,
                    },
                    {
                      title: '设备2',
                      key: '5',
                      icon: <CarryOutOutlined />,
                    },
                  ],
                },
                {
                  title: '六安市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '6',
                  children: [
                    {
                      title: '设备3',
                      icon: <CarryOutOutlined />,
                      key: '7',
                    },
                    {
                      title: '设备4',
                      icon: <CarryOutOutlined />,
                      key: '8',
                    },
                  ],
                },
              ],
            },
            {
              title: '合肥精微科技有限公司',
              key: 9,
              icon: <CarryOutOutlined />,
              children: [
                {
                  title: '芜湖市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '10',
                  children: [
                    {
                      title: '设备5',
                      icon: <CarryOutOutlined />,
                      key: '11',
                    },
                    {
                      title: '设备6',
                      icon: <CarryOutOutlined />,
                      key: '12',
                    },
                  ],
                },
                {
                  title: '马鞍山市政管理处',
                  icon: <CarryOutOutlined />,
                  key: '13',
                  children: [
                    {
                      title: '设备7',
                      icon: <CarryOutOutlined />,
                      key: '14',
                    },
                    {
                      title: '设备8',
                      icon: <CarryOutOutlined />,
                      key: '15',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    }
  },
  mounted() {
    this.getOrgTree()
    this.getInfoList();
  },
  methods: {
   async getOrgTree() {
      let res= await this.$http.get('/web/common/getOrgTree');
      this.treeData = _.get(res,'data')||[];
     this.expandedKeys=this.checkedKeys=tool.getTreeElm(this.treeData,'id')
    },
   async getInfoList(){
      let res =await this.$http.get('/commonQuery/listRail',{params:{orgIds:this.checkedKeys.join(',')}});
      this.mapInfo=tool.fromatMapInfo(_.get(res,'data')||[]);
      this.pointData=tool.getPoints(_.get(res,'data')||[]);
      console.log(this.pointData,'this.pointData');
    },


    onChange(e) {
      this.value = e.target.value
    },
    handleChangeCompany(value) {
      console.log(value) // { key: "lucy", label: "Lucy (101)" }
    },
    handleChangeDeviceGroup(value) {
      console.log(value) // { key: "lucy", label: "Lucy (101)" }
    },
    changeDeviceSactter(value) {
      this.selectedDeviceSactter = value
    },
    onSelectTree(selectedKeys, info) {
      console.log(selectedKeys,'====ddd===');
      this.checkedKeys=selectedKeys||[];
      this.getInfoList();

    },
    onCheckTree(event,node){
      this.checkedKeys=event||[];
      this.getInfoList();
    }
  },
}
</script>

<style lang="less" >

.top-mode-selector {
  padding-top: 20px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid #a0a0a0;
  padding-left: 15px;
  padding-right: 12px;
}
.device-search {
  margin: 15px;
  padding: 10px;
  background-color: #a0a0a0;
}
.device-scatter {
  margin: 0 0 15px 15px;
}
</style>
